<template>
  <el-dialog
      fullscreen
    top="10vh"
    width="800px"
    title="添加/编辑"
    :visible.sync="dialogValue"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-tabs v-model="tabName">
      <el-tab-pane label="基本信息" name="detail">
        <SubmitForm
            :rule-form="ruleForm"
            :rules="rules"
            :form-list="formList"
            @change="handleFormChange"
            @save="onSave"
            @close="dialogValue = false"
        />
      </el-tab-pane>
      <el-tab-pane label="课程内容" name="list" :disabled="disabled">
        <CourseList :businessId="ruleForm.id"/>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
import CourseList from './CourseList.vue'
import { http } from '@/api'
export default {
  name: 'FormAdd',
  components: {
    CourseList
  },
  computed: {
    disabled() {
      if (this.ruleForm.id) {
        return false
      }
      return true
    }
  },
  data() {
    return {
      tabName: 'detail',
      apiKey: 'course',
      dialogValue: false,
      ruleForm: {
      },
      defaultForm: {
        category_id: '',
        name: '',
        sort: 0,
        image: '',
        content: '',
        status: 1,
        nj_name: '',
        num: 0,
        teacher_name: ''
      },
      rules: {
        category_id: [{ required: true, message: '不能为空' }],
        name: [{ required: true, message: '不能为空' }]
      },
      formList: [
        {
          key: 'category_id',
          name: 'select',
          label: '分类名称',
          colSpan: 8,
          options: []
        },
        {
          key: 'name',
          name: 'input',
          label: '课程名称',
          colSpan: 8
        },
        {
          key: 'sort',
          name: 'input',
          label: '课程排序',
          colSpan: 8
        },
        {
          key: 'nj_name',
          name: 'input',
          label: '适人群',
          colSpan: 8
        },
        {
          key: 'num',
          name: 'input',
          label: '已学人数',
          colSpan: 8
        },{
          key: 'teacher_name',
          name: 'input',
          label: '老师',
          colSpan: 8
        },

        {
          key: 'post_url',
          name: 'file',
          multiple: false,
          defaultValue: '',
          label: '课程封面',
          colSpan: 8
        },
        {
          key: 'content',
          name: 'rich',
          label: '课程详情',
          colSpan: 24
        },
        {
          key: 'status',
          name: 'switch',
          label: '是否发布',
          activeValue: 1,
          inactiveValue: 0,
          colSpan: 24
        }
      ]
    }
  },
  methods: {
    handleFormChange({ key, val }) {

    },
    open(row) {
      this.dialogValue = true
      http.category.list().then(res => {
        this.formList[0].options = res.data.map(el => ({ name: el.name, value: el.id }))
      })
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data
          }
        })
      } else {
        this.ruleForm = {
          ...this.defaultForm
        }
      }
    },
    onSave() {
      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, { ...this.ruleForm }).then(res => {
        this.ruleForm.id = res.data.id
        this.$message.success('操作成功')
        this.$emit('get-page')
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
